<template>
	<view class="gongdi">
		<view class="gongdi-item" v-for="(item, index) of videoList" :key="index">
			<video :src="item.url" class="sel-video" @error="handleVideoErr" is-live></video>
			<view class="gongdi-item-con">{{item.intro}}</view>
		</view>
	</view>
</template>

<script>
	var ip ="192.168.1.51"
	// 安卓环境测试
	export default {
		name: 'gongdi',
		data() {
			return {
				ip:"192.168.1.51",
				videoList: [
					{
						url: 'rtmp://'+ip+'/live/test110',
						name: 'rtmp',
						intro: 'rtmp'
					},
					{
						url: 'rtsp://'+ip+':5544/live/test110',
						name: 'rtsp',
						intro: 'rtsp'
					},
					{
						url: 'http://'+ip+':8080/hls/test110/playlist.m3u8',
						name: 'm3u8 ',
						intro: 'm3u8'
					},
					{
						url: 'http://'+ip+':8080/hls/test110/record.m3u8',
						name: 'm3u8',
						intro: 'record.m3u8'
					},		{
						url: 'http://'+ip+':8080/live/test110.ts',
						name: 'ts',
						intro: 'ts'
					},
					{
						url: 'http://'+ip+':8080/live/test110.flv',
						name: 'flv',
						intro: 'flv'
					}
				]
			}
		},
		mounted() {
			console.log(ip)
			console.log(this.videoList)

				},
		methods: {
			handleVideoErr(res) {
				console.log(JSON.stringify(res))
				console.log('err')
			}
		}
	}
</script>

<style>
	.gongdi {
		width: 96%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 10upx auto;
	}

	.gongdi-item {
		width: 45%;
		height: 320upx;
		border: 1px solid #1ABC9C;
		margin-top: 10upx;
	}

	.gongdi-item-con {
		width: 100%;
		height: 60upx;
		line-height: 60upx;
		font-size: 28upx;
		text-align: center;
		overflow: auto;
		white-space: nowrap;
	}

	.sel-video {
		width: 100%;
		height: 260upx;
	}
</style>